<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    table {
      width: 500px;
      border-collapse: collapse;
      border: 1px solid deepskyblue;
    }
    td,
    th {
      border: 1px solid deepskyblue;
      text-align: center;
      padding: 20px;
    }
  </style>
  <!-- <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>李白</td>
          <td>18</td>
          <td>男</td>
        </tr>
        <tr>
          <td>李白</td>
          <td>18</td>
          <td>男</td>
        </tr>
        <tr>
          <td>李白</td>
          <td>18</td>
          <td>男</td>
        </tr>
    </tbody> 
</table>-->
  <body>
    <div id="container"></div>
  </body>
</html>
<script>
  // 表格分为行和列
  // 有几条数据就创建几行，也就意味着创建几个tr
  // 每条属性都是一个对象，每个对象中都有自己的属性，每个属性都对应一个td
  // 核心的操作方法就是节点的方法
  var arr = [
    {
      name: "李白",
      age: 18,
      gender: "男",
    },
    {
      name: "公孙离",
      age: 20,
      gender: "女",
    },
    {
      name: "元歌",
      age: 22,
      gender: "男",
    },
    {
      name: "元歌",
      age: 22,
      gender: "男",
    },
  ];
  //声明一个工具函数
  function _c(tagName) {
    return document.createElement(tagName);
  }
  //   再声明一个用于渲染的函数，render，只要传递数据进来就能生成对应的dom结构
  var headData = ["姓名", "年龄", "性别"];
  //   data 创建表格的数据
  // headDa 创建表头的数据
  // container 容器 要把表格展示到哪一个容器中
  //   showDelBtn 作用就是显示是否删除按钮
  var ctn = document.querySelector("#container");
  function render(data, headData, container, showDelBtn) {
    //先创建表头
    var thead = _c("thead");
    //创建th
    headData.forEach(function (item) {
      //   console.log(item);
      var th = _c("th");
      th.innerText = item;
      //将创建好的th添加到thead中
      thead.appendChild(th);
    });
    // 判断是否要显示删除按钮，那就要多创建一个th
    // 如果没有传showDelBtn参数，那么就是undefined 转换成布尔值就是false 传了就是true
    if (showDelBtn) {
      //表示要显示删除按钮了
      // 手动多创建一个th
      var th = _c("th");
      th.innerText = "操作";
      //   添加到thead
      thead.appendChild(th);
    }
    console.log(thead);
    // -------------------------------------------
    // 创建tbody部分
    var tbody = _c("tbody");
    // 创建tr
    data.forEach(function (item, index) {
      var tr = _c("tr");
      //   console.log(item);
      //   创建td
      //   循环item，创建td
      // 因为item是对象，循环的时候要使用for in进行循环
      for (k in item) {
        // 创建td
        var td = _c("td");
        td.innerText = item[k];
        // 将td添加到tr
        tr.appendChild(td);
      }
      //   判断是否要显示删除按钮，如果要显示删除按钮，那么需要手动多创建一个td
      if (showDelBtn) {
        var td = _c("td");
        // td中需要有一个删除按钮
        var btn = _c("button");
        // 一个不能改变的思路，就是根据数据进行驱动，只要数组中的数据少一个，那么视图就少一个
        // 这个需要我们自己实现，这是我们的编程思路
        // 将当前这条数据的索引，绑定到按钮上
        btn.dataIndex = index;

        btn.innerText = "删除";
        // 把按钮添加到td
        td.appendChild(btn);
        // 把td添加到tr
        tr.appendChild(td);
      }
      console.log(tr);
      //   将tr添加到tbody中
      tbody.appendChild(tr);
    });
    console.log(tbody);
    // 将thead和tbody一起添加到页面中
    // 创建一个table元素
    var table = _c("table");
    table.appendChild(thead);
    table.appendChild(tbody);
    console.log(table);
    // 将table添加到传入进来的容器中
    container.appendChild(table);
    // 给删除按钮注册事件，委托给table
    table.addEventListener("click", function (e) {
      //   console.log(e.target);
      // 判断点击到按钮时才执行逻辑
      if (e.target.localName === "button") {
        var _this = e.target;
        // console.log(_this.dataIndex);
        // 要删除数组中的数据
        data.splice(_this.dataIndex, 1);
        console.log(data);

        // 如果数据没有了 把表头也清掉
        if (!data.length) {
          container.removeChild(table);
          return; //中断渲染逻辑
        }
        // 重新绘制的时候 需要把之前的table移除掉
        container.removeChild(table);
        // 重新调用render函数，并且把已经删除的data重新传入
        render(data, headData, container, showDelBtn);
      }
    });
  }
  render(arr, headData, ctn, true);
</script>
